<!--
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.

Copyright (c) 2023-present Kaleidos INC
-->

<ng-container *transloco="let t">
  <form
    class="new-workflow-form-card"
    #form="ngForm"
    [showFormErrors]="submitted"
    [formGroup]="newWorkflowForm"
    (submit)="submitCreateWorkflow()">
    <div class="input-wrapper">
      <tg-ui-input class="workflow-input">
        <input
          tgAutoFocus
          [attr.aria-label]="t('kanban.create_workflow.workflow_name_aria')"
          formControlName="name"
          data-test="create-workflow-input"
          class="create-workflow-input"
          [maxlength]="workflowNameMaxLength"
          #statusInput
          inputRef
          [placeholder]="t('kanban.create_workflow.write_workflow_name')" />
        <ng-container inputError>
          <tg-ui-error error="required, pattern">
            {{ t('kanban.create_workflow.workflow_empty') }}
          </tg-ui-error>
        </ng-container>
      </tg-ui-input>
      <div
        *ngIf="
          newWorkflowForm.get('name')!.value?.length! >= workflowNameMaxLength
        "
        class="max-length">
        {{ t('form_errors.max_length') }}
      </div>
    </div>

    <button
      tuiButton
      data-test="workflow-create"
      appearance="primary"
      type="submit">
      {{ workflow ? t('commons.save') : t('kanban.create_workflow.save') }}
    </button>
    <button
      (click)="cancelEdit()"
      data-test="cancel-edit-workflow"
      tuiButton
      type="button"
      appearance="tertiary">
      {{ t('commons.cancel') }}
    </button>
  </form>
</ng-container>
